@extends('layouts.front')

@section('title', ' - 我的货品')

@section('content')
@push('styles')
<style>
    .pro-details .bottom-bar .bottom-bar-action:last-child a {
        color: #fff;
        background-color: #04a25c;
    }
</style>
@endpush
<div class="pro-details pro-preview" style="margin-bottom: 50px;" >
    <div class="swiper-container banner-pro-container">
        <div class="swiper-wrapper banner-wrapper">
            @foreach ($product->pic_group as $pic)
            <div class="swiper-slide banner-pro">
                <img src="/{{ $pic }}" alt="">
            </div>
            @endforeach
        </div>
        <div class="swiper-pagination"></div>
    </div>

    <div class="pro-info">
        <div class="pro-info-h">
            <div class="pro-name">{{ $product->name }} {{ $product->info }}</div>
            <div class="pro-des">现货</div>
        </div>
        <div class="pro-info-m">
            <div class="pro-address">{{ $shop->user->address }}</div>
        </div>
        <div class="pro-info-b">
            <div class="price-group">
                <span class="pro-price">{{ $product->price }}</span>
                <span>元</span>/
                <span class="pro-unit">{{ $product->unit }}</span>
            </div>
        </div>
    </div>

    <div class="pro-bsn-info">
        <div class="bsn-avator">
            <img src="{{ $shop->user->avatar }}" alt="">
        </div>
        <div class="bsn-des">
            <span class="bsn-name">
                {{ $shop->user->name }}
            </span>
            <span class="bsn-level">
                诚信等级：
                <span class="bsn-level-value">1级</span>
            </span>
        </div>
    </div>

    <div class="pro-spe">
        <div class="pro-spe-head">
            详细规格
        </div>
        <div class="pro-spe-body">
            {{ $product->description }}
            <div class="img-group" style="text-align: center;" >
            @foreach ($product->pic_group as $pic)
                <img src="/{{ $pic }}" alt="" style="max-width: 100%;" >
            @endforeach
            </div>
        </div>
    </div>

    <div class="bottom-bar" to="/addressCreate">
        <div class="bottom-bar-action">
            <a href="{{ route('productEdit', ['id' => $product->id]) }}"><i class="icon iconfont icon-edit"></i>  修改</a>
        </div>
    </div>
</div>

@section('tabbar')
@endsection

@push('scripts')
<script>
    var vm = new Vue({
        el: '#app'
    });

    $(document).ready(function() {
        var swiper = new Swiper('.swiper-container', {
            pagination: {
                el: '.swiper-pagination',
                type: 'fraction',
            },
        });
    });
</script>
@endpush
@endsection

